<!DOCTYPE html>
<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <style>
        /*html, body {*/
        /*    height: 100%;*/
        /*}*/
        html, body {
            height: 100%;
        }

        body {
            display: flex;
            padding: 40px 40px;
            background-color: #8EC5FC;
            background-image: -webkit-linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
            background-image: -moz-linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
            background-image: -o-linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
            background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
        }

        .box1 {
            width: 60%;
            margin-top: 60px;
        }

        .box2 {
            margin: 120px auto;
        }
    </style>
</head>
<body>
<!-- 定义两个盒子模型,其中 class="box1"  宽度 width: 60%;  上外边框 margin-top: 60px-->
<div class="box1">
    <!-- bootstrap自带的轮播图-->
    <!-- 参考地址: https://www.bootcss.com/p/layoutit/ -->
    <div class="carousel slide" data-ride="carousel" id="carouselExampleIndicators">
        <ol class="carousel-indicators">
            <li class="active" data-slide-to="0" data-target="#carouselExampleIndicators"></li>
            <li data-slide-to="1" data-target="#carouselExampleIndicators"></li>
            <li data-slide-to="2" data-target="#carouselExampleIndicators"></li>
        </ol>
        <div class="carousel-inner" style="border-radius: 20px">
            <div class="carousel-item active">
                <img alt="..." class="d-block w-100" th:src="@{/img/1.jpg}">
            </div>
            <div class="carousel-item">
                <img alt="..." class="d-block w-100" th:src="@{/img/2.jpg}">
            </div>
            <div class="carousel-item">
                <img alt="..." class="d-block w-100" th:src="@{/img/3.jpg}">
            </div>
        </div>
        <a class="carousel-control-prev" data-slide="prev" href="#carouselExampleIndicators" role="button">
            <span aria-hidden="true" class="carousel-control-prev-icon"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" data-slide="next" href="#carouselExampleIndicators" role="button">
            <span aria-hidden="true" class="carousel-control-next-icon"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

<div class="box2">
    <h1 style="margin-bottom: 40px">欢迎使用图书管理系统</h1>
    <div>
        <form method="post" th:action="@{/login}">
            <div class="form-group">
                <label class="" for="username">用户名:</label>
                <input class="form-control" id="username" name="username" type="text">
            </div>
            <div class="form-group">
                <label class="" for="password">密码:</label>
                <input class="form-control" id="password" name="password" type="password">
            </div>
            <input class="btn btn-primary btn-lg" style="margin-top: 20px" type="submit"
                   value="登&nbsp;&nbsp;&nbsp;&nbsp;录">
        </form>
    </div>
</div>
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>